<template>
  <div class="card-button flex flex-s">
    <button
      :disabled="disabled"
      class="flex flex-s"
      :accesskey="accesskey"
      @click="onClick"
    >
      <slot></slot>
    </button>
  </div>
</template>

<script setup lang="ts">
  const emit = defineEmits(['click']);
  const onClick = () => {
    emit('click');
  };
  const props = withDefaults(
    defineProps<{
      size?: string;
      padding?: string;
      backgroundColor?: string;
      color?: string;
      accesskey?: string;
      disabled?: boolean;
    }>(),
    {
      size: '24px',
      padding: '8px',
      backgroundColor: 'white',
      color: '#333',
      disabled: false,
    }
  );
</script>

<style lang="scss" scoped>
  .card-button {
    display: inline-flex;
    width: fit-content;
    height: 24px;
  }
  button {
    border: none;
    width: fit-content;
    padding: 0 v-bind(padding);
    height: 100%;
    line-height: v-bind(size);
    height: v-bind(size);
    border-radius: 2px;
    color: v-bind(color);
    cursor: pointer;
    opacity: 0.8;
    background-color: v-bind(backgroundColor);
    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    &:hover {
      cursor: pointer;
      opacity: 1;
    }
  }
</style>
